import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import PageLoading from '@/components/PageLoading';
import {
  Card,
  Button,
  Icon,
  Modal,
  message,
  Form,
  Input,
  Checkbox,
  Col,
  Row,
  Tag,
  Select,
} from 'antd';
import styles from './index.less';

const { Option } = Select;
const formItemLayout = {
  labelCol: { span: 1 },
  wrapperCol: { span: 20 },
};

class SlotSelect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: [],
    };
  }

  addSlot = () => {
    const { slots, paramType } = this.props;
    if (paramType) {
      slots.push({ selected: '' });
    } else {
      slots.push('');
    }
    this.props.upData(slots);
  };

  handleSlotSelectChange = (value, index) => {
    const { selected, paramType } = this.props;
    if (paramType) {
      selected[index].selected = value;
    } else {
      selected[index] = value;
    }
    this.setState({ selected }, () => {
      this.props.upSelected(selected);
    });
  };

  forMap = (tag, index) => {
    const { dialogSlots, selected, paramType } = this.props;
    const OptionElem = dialogSlots.map(this.forMapSlotsOption);

    return (
      <span style={{ marginLeft: 15, display: 'inline-block' }} key={index}>
        <span className={styles.slotNumber}>{index + 1}</span>
        {!paramType ? (
          <Select
            size="small"
            value={selected[index] !== '' ? selected[index] : 'none'}
            key={index}
            style={{ width: 100, marginLeft: 5 }}
            onChange={value => this.handleSlotSelectChange(value, index)}
          >
            <Option value="none">选择词槽</Option>
            {OptionElem}
          </Select>
        ) : (
          <Select
            size="small"
            value={selected[index].selected !== '' ? selected[index].selected : 'none'}
            key={index}
            style={{ width: 120, marginLeft: 5 }}
            onChange={value => this.handleSlotSelectChange(value, index)}
          >
            <Option value="none">选择词槽</Option>
            {OptionElem}
          </Select>
        )}
        <Icon
          type="close-circle"
          style={{ marginLeft: 5, cursor: 'pointer' }}
          onClick={() => this.delSlotByIndex(index)}
        />
      </span>
    );
  };

  forMapSlotsOption = option => {
    return (
      <Option
        key={option.slotId}
        value={option.slotId}
        disabled={this.state.selected.indexOf(option.slotId) !== -1}
      >
        {option.slotName}
      </Option>
    );
  };

  delSlotByIndex = index => {
    const { slots } = this.props;
    slots.splice(index, 1);
    this.props.upData(slots);
  };

  render() {
    const { slots } = this.props;
    let tagChild = null;
    if (slots.length > 0) {
      tagChild = slots.map(this.forMap);
    }
    return (
      <GridContent>
        <Suspense fallback={<PageLoading />}>
          <Form.Item {...formItemLayout} label="">
            <div style={{ marginLeft: 10, display: 'inline-block', width: '100%' }}>
              {tagChild}
              <Button
                htmlType="button"
                type="primary"
                size="small"
                onClick={() => this.addSlot()}
                className={styles.addSlotBtn}
              >
                添加
              </Button>
            </div>
          </Form.Item>
        </Suspense>
      </GridContent>
    );
  }
}
export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Form.create()(SlotSelect));
